<template>
	<view class="confirm_order">
		<view class="message" v-if="goodsOrder.expressType === '1' || goodsOrder.expressType === '2'">请先与商家确认后选择对应的门店自提
		</view>
		<view style="height: 20rpx;"></view>
		<view class="tabs" v-if="goodsOrder.expressType === '2'">
			<text @click="sendType = '0'" :class="{active: sendType === '0' }">快递邮寄</text>
			<text @click="sendType = '1'" :class="{active: sendType === '1' }">门店自提</text>
		</view>
		<i-card padding="32rpx 32rpx 0 0rpx" @click="navTo('/pages/views/take_address?type=select', 'navigateTo')"
			v-if="goodsOrder.expressType === '0' || sendType === '0'">
			<view class="title" v-if="addressData.userName">{{addressData.userName}} {{addressData.userMobile}}</view>
			<view class="address" v-if="addressData.userName">
				{{addressData.addrDetail}}
			</view>
			<view class="noAdd" v-else>
				<text>选择收货地址</text>
				<view class="goto">
					<image src="../../static/images/goto_icon.png" mode=""></image>
				</view>
			</view>
			<image class="liness" src="../../static/images/add_line.png" mode="heightFix"></image>
		</i-card>
		<i-card top="20rpx" v-if="goodsOrder.expressType === '1' || sendType === '1'">
			<i-formItem title="联系人">
				<view class="form_items">
					{{userInfo.nickName}}
				</view>
			</i-formItem>
			<i-formItem title="手机号">
				<view class="form_items">
					{{userInfo.mobile}}
				</view>
			</i-formItem>
			<view class="selectStore" @click="navTo('/pages/views/search_store', 'navigateTo')">
				<view class="select_left">
					<view class="location">
						<image src="../../static/images/location_icon.png" mode=""></image>
					</view>
					<view class="titles">
						<text class="title_name" v-if="storeData.address">{{storeData.storeName}}</text>
						<text class="title_name" v-else>请选择提货门店</text>
						<text v-if="storeData.address">{{storeData.address}}</text>
						<text v-if="storeData.distance">距您 {{storeData.distance}}km</text>
					</view>
				</view>
				<view class="goto">
					<image src="../../static/images/goto_icon.png" mode=""></image>
				</view>
			</view>
		</i-card>
		<i-card top="24rpx" padding="40rpx 32rpx">
			<view class="goods_i">
				<view class="titles space">{{goodsOrder.vipGoodsName}}</view>
				<view class="text space">{{goodsOrder.vipLevelLabel}} {{goodsOrder.givingAmount}}优惠金</view>
				<view class="price">
					<i-price :size="26">{{goodsOrder.discountPrice}}</i-price>
					<text class="text">￥{{goodsOrder.price}}</text>
				</view>
			</view>
		</i-card>
		<i-card top="24rpx" padding="40rpx 32rpx">
			<i-orderItem :border="false" padding="12rpx 0" title="原价" :content="'¥'+goodsOrder.price"></i-orderItem>
			<i-orderItem :border="false" padding="12rpx 0" title="已优惠"
				:content="'¥' + goodsOrder.discountedAmount"></i-orderItem>
			<i-orderItem :border="false" padding="12rpx 0" title="折扣价"
				:content="'¥'+goodsOrder.discountPrice"></i-orderItem>
			<i-formItem padding="12rpx 0 24rpx 0" title="备注" titleStyle="white-space: nowrap; color: #8E8E93">
				<input placeholder-class="placeholder-class" v-model="orderRemark"
					style="text-align: right; width: 70%;" placeholder="选填，请填写需备注的特殊情况" type="text">
			</i-formItem>
			<i-orderItem :border="false" padding="24rpx 0 0 0" title="实付金额" cStyle="font-size: 32rpx; font-weight: bold"
				:content="'¥'+goodsOrder.discountPrice"></i-orderItem>
		</i-card>
		<view class="agree">
			<radio @click="checkValue = !checkValue" :checked="checkValue" color="#FB652E"
				style="transform:scale(0.7)" />
			<view>我已阅读并同意 <text @click="navTo('/pages/views/accord?agreementId=10010010', 'navigateTo')">《会员服务协议》</text>
			</view>
		</view>
		<view style="height: 220rpx;"></view>
		<view class="bottom">
			<view class="bottoms">
				<i-price :size="28">{{goodsOrder.discountPrice}}</i-price>
				<i-buttons radius="4" padding="18rpx 76rpx" color="#fff" size="32" bgColor="#FB652E"
					@click="submitOrder">提交订单
				</i-buttons>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		navTo,
		fixed,
		showTost
	} from '../../utils/common'
	import {
		getApiListAddress
	} from '../../api/index'
	import useStore from '../../stores/index'
	import {
		computed,
		reactive,
		ref
	} from 'vue';

	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'

	const store = useStore()
	const orderRemark = ref('')
	const sendType = ref('')
	const checkValue = ref(true)


	const storeData = reactive({
		address: "",
		distance: '',
		merId: "",
		mobile: "",
		storeId: "",
		storeName: ""
	})

	const addressData = reactive<{
		addrDetail : string,
		userMobile : string,
		userName : string,
		addrId : string
	}>({
		addrDetail: '',
		userMobile: '',
		userName: '',
		addrId: '',
	})
	const userInfo = computed(() => {
		return store.userInfo
	})
	const goodsOrder = computed(() => {
		sendType.value = store.goodsOrder?.expressType === '2' ? '0' : store.goodsOrder?.expressType
		return store.goodsOrder as any
	})

	onLoad(() => {
		getAdd()
	})

	const submitOrder = async () => {
		if (sendType.value === '0' && !addressData.addrId) {
			showTost('请选择收货地址！')
			return
		}
		if (sendType.value === '1' && !storeData.storeId) {
			showTost('请选择提货门店')
			return
		}
		if (!checkValue.value) {
			showTost('请勾选协议')
			return
		}
		store.setGoodOrder({
			"goodsId": goodsOrder.value.id,
			"invitation": "",
			"sendType": sendType.value,
			discountPrice: goodsOrder.value.discountPrice,
			orderRemark: orderRemark.value,
			addrId: sendType.value === '0' ? addressData.addrId : storeData.storeId
		})
		navTo('/pages/views/cashier?type=vip', 'redirectTo')
	}
	const getAdd = async () => {
		const {
			data
		} = await getApiListAddress()
		if (data && data.length > 0) {
			addressData.addrDetail = (data[0].provinceName || '') + (data[0].cityName || '') + (data[0].countyName || '') + data[0].addrDetail
			addressData.userMobile = data[0].userMobile
			addressData.userName = data[0].userName
			addressData.addrId = data[0].addrId
		}
	}
	uni.$on('changeAdd', (data) => {
		addressData.addrDetail = (data.provinceName || '') + (data.cityName || '') + (data.countyName || '') + data
			.addrDetail
		addressData.userMobile = data.userMobile
		addressData.userName = data.userName
		addressData.addrId = data.addrId
	})
	uni.$on('changeStore', (data) => {
		storeData.address = data.address
		storeData.distance = data.distance || 0.01
		storeData.mobile = data.mobile
		storeData.storeId = data.storeId
		storeData.storeName = data.storeName
	})
	onUnload(() => {
		uni.$off('changeAdd', () => { })
		uni.$off('changeStore', () => { })
	})
</script>

<style lang="scss" scoped>
	.confirm_order {
		width: 100%;
		min-height: 100vh;
		background-color: $backColor;

		.goods_i {
			@include flexC;
			width: 100%;

			.text {
				@include contentfont;
			}

			.titles {
				@include titlefont;
			}

			.space {
				margin-bottom: 16rpx;
			}

			.price {
				@include flexR;

				text {
					text-decoration: line-through;
					margin-left: 8rpx;
				}
			}
		}

		.agree {
			margin-top: 40rpx;
			@include flexRC;
			width: 100%;
			@include contentfont;
		}

		.bottom {
			width: 100%;
			position: fixed;
			bottom: 0;
			padding: 20rpx 0 52rpx 0;
			background-color: #fff;
			z-index: 99;

			.bottoms {
				@include flexRS;
				width: calc(100% - 64rpx);
				margin: 0 auto;
			}
		}

		.title {
			margin-left: 32rpx;
			@include contentfont(28rpx);
			color: $title-color;
			margin-bottom: 12rpx;
			@include dWeight;
			@include warp;
		}

		.address {
			margin-left: 32rpx;
			@include contentfont(26rpx);
		}

		.noAdd {
			@include flexRS;
			padding-left: 32rpx;
			@include titlefont;
		}

		.liness {
			width: 100%;
			height: 6rpx;
			margin-bottom: -10rpx;
		}

		.form_items {
			width: 70%;
			@include contentfont(26rpx);
		}

		.selectStore {
			margin-top: 40rpx;
			@include flexRS;

			.select_left {
				@include flexR;

				.location {
					width: 48rpx;
					height: 48rpx;
					@include flexRC;

					image {
						width: 48rpx;
						height: 48rpx;
					}
				}

				.titles {
					margin-left: 28rpx;
					@include flexC;

					text {
						@include contentfont(26rpx);
						margin-bottom: 8rpx;
					}

					.title_name {
						@include titlefont(28rpx);
					}
				}
			}
		}

		.message {
			@include dfont(26rpx);
			color: #FF9F0A;
			background-color: rgba(255, 159, 10, 0.1);
			padding: 18rpx 32rpx;
		}

		.tabs {
			width: 100%;
			@include flexR;
			justify-content: space-around;

			text {
				@include dfont;
				border-bottom: 4rpx solid rgba(0, 0, 0, 0);
			}

			margin-bottom: 20rpx;

			.active {
				color: $dcolor;
				font-weight: 500;
				border-bottom: 4rpx solid $dcolor;
			}
		}

	}
</style>